<script setup lang="ts">
import { ref, onUpdated } from "vue";

// 定义响应式数据对象
const data = ref({
  time: 0,
  foots: 0,
  long: 0,
});
const isUpdated = ref(false);

// onUpdated 生命周期函数，数据更新后触发
onUpdated(() => {
  isUpdated.value = true;
  // 可添加样式变化后的其他逻辑，比如几秒后移除样式等（这里简单控制样式类）
});

// 定义更新数据的函数
const updateData = () => {
  data.value = {
    time: 68,
    foots: 11896,
    long: 7.96,
  };
};
</script>
<template>
  <div class="sport-card" :class="{ updated: isUpdated }">
    <h1>今日运动数据</h1>
    <p class="line"></p>
    <h3>
      运动时长：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
        data.time
      }}分钟
    </h3>
    <p class="line"></p>
    <h3>
      行走步数：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
        data.foots
      }}步
    </h3>
    <p class="line"></p>
    <h3>
      运动距离：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
        data.long
      }}公里
    </h3>
    <button @click="updateData">更新数据</button>
  </div>
</template>
<style scoped>
button {
  color: white;
  background-color: #34aa34;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
button:hover {
  background-color: #2a8a2a;
}
.sport-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: 400px;
  margin: 0 auto;
  text-align: center;
  transition: all 0.3s ease;
}
.updated {
  background-color: #f0f9e8;
  box-shadow: 0 4px 8px rgba(0, 14, 0, 0.2);
}
.line {
  height: 1px;
  background-color: #eee;
  margin: 10px 0;
}
h1 {
  margin-bottom: 15px;
}
h3 {
  margin: 10px 0;
  text-align: left;
}
</style>
